		<template>
	<div class="page-content">
		<div class="page-title">
			请输入证件信息
			<div class="page-timer">
				<Timer seconds="180" title="输入证件信息"></Timer>
			</div> 
		</div>
		
		<div class="page-main"  > 
			<div class="inputs" > 
				<div class="row">
					<label class="label">证件类别：</label>
					<span class="value" style="text-align: left;">{{certificateType}}</span>
				</div>
				<div class="row" >
					<label class="label" :style="{color:focusId=='code'?'red':'inherit'}">证件号码：</label>
					<input id="code" class="value"  type="text" @click="clickCode" @input="inputed" v-model="code" />
					<span class="input-info" v-if="code.length > 2"> {{code.length}} 位</span>
				</div>
				<div class="row">
					<span class="label" :style="{color:focusId=='name'?'red':'inherit'}">姓<span style="color:transparent">空白</span>名：</span>
					<input id="name" class="value"  type="text"  @click="clickName" @input="inputed" @blur="blured"  v-model="name"/>
				</div>
				<div class="row">
					<span class="label" :style="{color:focusId=='address'?'red':'inherit'}">地<span style="color:transparent">空白</span>址：</span>
					<input id="address" class="value"  type="text"  @click="clickAddress" @input="inputed"  v-model="address" />
				</div>
			</div>
			
			
			<div class="keyboard" @click='keyClick'>  
				<div class="keyboard-row">
					<span class="key">1</span>
					<span class="key">2</span>
					<span class="key">3</span>
					<span class="key">4</span>
					<span class="key">5</span>
					<span class="key">6</span>
					<span class="key">7</span>
					<span class="key">8</span>
					<span class="key">9</span>
					<span class="key">0</span>
					<span class="key" data-key='BACKSPACE'>
						<svg t="1604297383925" class="icon" viewBox="0 0 1024 1024" version="1.1" 
						  xmlns="http://www.w3.org/2000/svg" p-id="1196" 
						  width="36" height="36">
						  <path fill="#fff" d="M980.4 849.5H326.2c-13.6 0-25.3-7.8-31.7-20.4L17.2 537.5c-15.6-16.4-15.6-46.3 0-62.7L299.3 178c7.7-8.1 18.1-11.9 28.5-10.8h652.5c21 0 36.8 18.2 36.8 42.3v597.8c0 24-15.8 42.2-36.7 42.2z m-640.8-60h617.5V227.1H335.4l-265.2 279 269.4 283.4z" p-id="1197"></path>
						  <path fill="#fff" d="M395.929 710.279l446.534-446.534 42.426 42.426-446.534 446.534z" p-id="1198"></path>
						  <path fill="#fff" d="M395.999 306.162l42.426-42.426L884.958 710.27l-42.426 42.426z" p-id="1199"></path>
						</svg>
					</span>
				</div>
				<div class="keyboard-row">
					<span class="key">Q</span>
					<span class="key">W</span>
					<span class="key">E </span>
					<span class="key">R </span>
					<span class="key">T </span>
					<span class="key">Y </span>
					<span class="key">U </span>
					<span class="key">I </span>
					<span class="key">O </span>
					<span class="key">P </span>
					<span class="key">( </span>
				</div>
				<div class="keyboard-row">
					<span class="key"  data-key='CAPSLOCK'>
						<svg t="1604542669300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6444" 
						width="32" height="32"><path d="M838.077554 372.356887H628.671125v558.523811c0 51.199616-41.919686 93.119302-93.119302 93.119302h-46.527651c-51.199616 0-93.119302-41.919686-93.119301-93.119302V372.356887H186.498441c-14.015895 0-23.295825-9.27993-23.295825-23.231825a21.119842 21.119842 0 0 1 7.039947-16.319878L496.00012 7.047627A21.119842 21.119842 0 0 1 512.319998 0.00768a21.119842 21.119842 0 0 1 16.255878 7.039947L854.397432 332.805184a21.119842 21.119842 0 0 1 7.039947 16.319878c0 13.951895-9.34393 23.231826-23.359825 23.231825zM512.319998 55.879261L242.306023 325.765237h200.190498v605.051462c0 
						25.599808 20.927843 46.591651 46.527651 46.59165h46.527651a46.71965 46.71965 0 0 0 
						46.527651-46.59165V325.829236h200.190499L512.319998 55.879261z" p-id="6445" fill="#ffffff"></path></svg>
					</span>
					<span class="key">A </span>
					<span class="key">S </span>
					<span class="key">D </span>
					<span class="key">F </span>
					<span class="key">G </span>
					<span class="key">H </span>
					<span class="key">J </span>
					<span class="key">K </span>
					<span class="key">L </span>
					<span class="key">) </span>
					
				</div>
				<div class="keyboard-row">
					<span class="key" style="font-size: 24px;"  data-key='SHIFT'>中/英</span>
					<span class="key">Z</span>
					<span class="key">X</span>
					<span class="key">C</span>
					<span class="key">V</span>
					<span class="key">B</span>
					<span class="key">N</span>
					<span class="key">M</span>
					<span class="key" style="width:149px; flex:none;" data-key=' '>
						<svg t="1604542445778" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 
						p-id="1970" width="64" height="36">
						<path d="M64 635.2V388.8h82v165.8h731.9V388.8H960v246.4H64z m0 0" p-id="1971" fill="#FFFFFF"> 
						</path></svg>
					</span>  
					<span class="key" style="font-size: 24px;" data-key='HandWrite'>
						手写
					</span>
				</div>
			</div>
		</div>
		
		
		<div style="height: 129px;" >
			<a class="btn-big" @click="save"> 确 定 </a>
		</div>
	</div>
	
</template>

<script>
	//TODO: 10秒超时自动退出
	export default{  
		data(){
			return {
				certificateType:'',
				code:'',
				name:'',
				address:'',
				focusId:'code',
				uppercase:true,
				tempInput:'',
				tempKeys:'',
				url:this.$route.path,
			}
		},
		
		created(){ 
			this.send({name:'OpenKeyboard', remark:'打开软键盘',x:188,y:515});
			//this.certificateType = this.$route.params.certificateType;
			this.certificateType = sessionStorage.getItem('certype');
			sessionStorage.removeItem('certype');
			console.log("certificateType - " + this.certificateType)
			window.setTimeout(()=>{
				//debugger;
				const elcode = document.getElementById('code');
				elcode.focus();
			},10); 
		},
		
		beforeDestroy(){
			this.send({name:'CloseKeyboard', remark:'关闭软键盘', route:this.url});
		},
		
		methods:{ 
			save(){
				if(this.code.length < 6 || this.code.length>40){
					this.toast("请输入合法的证件号码");
					return;
				}
				
				if(this.name.length < 2 || this.name.length>120){
					this.toast("请输入合法的姓名");
					return;
				}
				
				if(this.address.length < 6 || this.address.length>255){
					this.toast("请输入合法的地址");
					return;
				}
				 
				this.send({name:'SaveCertificateInfo', remark:'保存证件信息', route:this.url, 
					certName:this.name , certCode:this.code, certAddress:this.address,});
				
				this.$router.push('/check/input/archive-code')
			},
			
			blured(){
				//alert(this.name);
			},
			
			inputed(){
				
			},
			
			clickCode(){
				this.toast('')
				this.focusId='code';
				this.setUpperCase(true) 
			},
			
			clickName(){
				this.toast('')
				this.focusId='name';
				this.setUpperCase(false) 
			},
			
			clickAddress(){
				this.toast('')
				this.focusId='address';
				this.setUpperCase(false) 
			},
			
			setUpperCase(upper){
				this.uppercase = upper;
				this.send({name:'SetCase', upper:upper, remark:'设置大小写'});
			},
			
			keyClick(event){
				const focusId = this.focusId;
				let el = event.target; 
				 
				while(el.tagName=='svg' || el.tagName == 'path' ){
					el = el.parentNode;
				}
				 
				if(el.className != 'key')
					return;
					 
				let dataKey = el.getAttribute('data-key')
				
				//大小写切换处理
				if(dataKey == 'CapsLock'.toUpperCase()){
					this.setUpperCase(!this.uppercase)
					return;
				}
				
				if(dataKey == null){
					dataKey = this.uppercase ? el.innerText.toUpperCase() : el.innerText.toLowerCase();
				}
				 
				const input = document.getElementById(focusId);
				input.focus()
				input.selectionStart = input.value.length;
				 
				//编辑编码，直接处理
				if(focusId == 'code'){
					this.setCode(dataKey);
					return;
				}
				
				//编辑姓名地址，通过模拟按键
				this.tempKeys += 
				dataKey = "{"+dataKey+"}";
				if(input.value)
				this.tempInput += dataKey;	 
				console.log("发送虚拟按键: " + this.tempInput); 
				this.send({name:'SimulateKey', key:this.tempInput, remark:'模拟按键'});
			},
			
			setCode(value){
				if(value == 'BACKSPACE'){
					this.code = this.code.substring(0,this.code.length - 1); 
				} else if(value.length == 1 && this.code.length < 18) {
					this.code = this.code + value;
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.page-main{
		height: 695px; background-color: #f8f9fb; padding: 20px 40px;  
	}
	
	.inputs{width:900px; margin-left:210px;  }
		
	.page-main a{
		border:solid 1px #ddd;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #1268f9;
		border-radius: 55px;
		color: #fff ;
		font-size: 32px;
	}
	
	
	.inputs .row{
		height:65px;
		line-height:65px; 
		text-align: left;
	}
	
	.inputs .label{
		white-space:pre;
		font-size: 32px;
		text-align: right;
		display: inline-block;
		width:160px;
		/* text-align: justify; */
	} 
	
	.inputs .value{
		display: inline-block;
		text-align: left;
		color: #999 !important;
		padding-left:1rem;
		font-size: 36px; 
		height:50px;
		width:600px;
	}
	
	.input-info{
		display: inline-block;
		padding: 10px;
		font-size: 1.5rem;
		color: #888;
		width:100px;
	}
	
	.keyboard{
		border: solid 2px #adbac3;
		border-radius: 20px;
		height: 330px;
		width:800px;
		margin:40px auto 10px auto;
		padding: 5px;
		display: flex;
		flex-direction: column;
		display: none;
	}
	
	.keyboard-row{
		flex:1;
		display: flex;
	}
	
	.key{
		flex:1;
		background-color: #adbac3;
		border-radius: 10px;
		margin:5px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32px;
		color: #fff;
		cursor: pointer;
	}
</style>
